<template>
  <div>
    <div class="total-box">
      <img class="all-bg" src="static/images/login-bg.png">
      <div class="right" v-show="page">
        <img class="title-img" src="static/images/title.png">
        <div class="form-box">
          <p class="top-error-tip" v-show="tipError||pwdError||nameError">
            <img src="static/images/error.png">
            <span>用户名或密码输入错误</span>
          </p>
          <p class="userinfo" style="margin-top: 10px">
            <span>账号：</span>
            <input type="text" v-model="accountName" placeholder="请输入您的账号">
            <a class="left-error-tip" v-show="nameError" style="width: 110px">
              <img src="static/images/error.png">
              <a>账号不能为空</a>
            </a>
          </p>
          <p class="userinfo">
            <span>密码：</span>
            <input type="password" v-model="accountPassword" placeholder="请输入密码" @keyup.enter="loginERP">
            <a class="left-error-tip" v-show="pwdError" style="width: 110px">
              <img src="static/images/error.png">
              <a>密码不能为空</a>
            </a>
          </p>
          <div class="remember-box">
            <span style="display: inline-block;width: 18%;color: #fff;font-size: 17px;"></span>
            <p class="inside-box">
              <img class="img1" src="static/images/cheked.png" v-show="isChecked">
              <img class="img2" src="static/images/uncheked.png" v-show="!isChecked">
              <input type="checkbox" v-model="isChecked" :checked="isChecked" @click="changeChecked"/>
              <span class="remember" @click="changeChecked">记住密码</span>
              <span class="forget" @click="forgetPassword">忘记密码</span>
            </p>
          </div>
          <p class="login-box">
            <button class="login-btn" @click="loginERP">登录</button>
          </p>
        </div>
      </div>
      <div class="right" v-show="!page" style="height: 440px;margin-top: -220px">
        <!--<p class="top-error-tip" v-show="tipError||pwdError||nameError">-->
        <!--<img src="static/images/error.png">-->
        <!--<span>用户名或密码输入错误</span>-->
        <!--</p>-->
        <img class="title-img" src="static/images/title.png">
        <div class="form-box">
          <p class="userinfo" style="margin-top: 10px">
            <span class="pageSpan">手机号：</span>
            <input type="text" class="pageInput" v-model="phoneNumber" placeholder="请输入您的手机号" @blur="isPhone">
            <a class="left-error-tip page-tip" v-show="phoneError">
              <img src="static/images/error.png">
              <a>手机号码输入有误</a>
            </a>
          </p>
          <p class="userinfo">
            <span class="pageSpan">短信验证码：</span>
            <input type="text" class="pageInput validateNum" v-model="validateCode" placeholder="请输入验证码">
            <el-button class="getCode" @click="getValidateCode" :loading="loading">{{validateName}}</el-button>
            <!--<a class="left-error-tip page-tip" v-show="pwdError" style="width: 135px">-->
              <!--<img src="static/images/error.png">-->
              <!--<a>验证码有误</a>-->
            <!--</a>-->
          </p>
          <p class="userinfo">
            <span class="pageSpan">新密码：</span>
            <input type="password" class="pageInput" v-model="newPassword" placeholder="请输入新密码" @blur="validatePassword()">
            <a class="left-error-tip page-tip" v-show="validateNewPassword">
              <img src="static/images/error.png">
              <a>密码长度6-16位</a>
            </a>
          </p>
          <p class="userinfo">
            <span class="pageSpan">确认新密码：</span>
            <input type="password" class="pageInput" v-model="ensurePassword" placeholder="请再次输入密码" @blur="reValidatePassword()">
            <a class="left-error-tip page-tip" v-show="validateEnsurePassword">
              <img src="static/images/error.png">
              <a>确认密码有误</a>
            </a>
          </p>
          <p class="login-box">
            <button class="login-btn pageBtn" @click="submitForm">提交</button>
            <button class="login-btn pageBtn cancelEdit" @click="cancel">取消</button>
          </p>
        </div>
      </div>
    </div>
    <div style="position: fixed;right: 87px;bottom: 105px">
      <img src="static/images/tip.png" style="display: block;width: 216px;height: 32px">
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return {
        page:true,
        loading:false,
        accountName:'',
        accountPassword:'',
        isChecked:false,
        nameError:false,
        pwdError:false,
        tipError:false,
        phoneNumber:'',
        phoneError:false,
        validateCode:'',
        validateName:'获取验证码',
        newPassword:'',
        validateNewPassword:false,
        ensurePassword:'',
        validateEnsurePassword:false,
      }
    },
    created(){
      if(this.$cookie.get('QYErpLoginName')&&this.$cookie.get('QYErpLoginPassword')){
        this.accountName = this.$cookie.get('QYErpLoginName');
        this.accountPassword = this.$cookie.get('QYErpLoginPassword');
        this.isChecked = true;
      }

    },
    methods:{
      rememberPassword(){
        if(this.isChecked){
          this.$cookie.set('QYErpLoginName',this.accountName);
          this.$cookie.set('QYErpLoginPassword',this.accountPassword);
        }else{
          this.$cookie.remove('QYErpLoginName');
          this.$cookie.remove('QYErpLoginPassword');
        }
      },
      changeChecked(){
        this.isChecked = !this.isChecked
      },
      forgetPassword(){
        this.page = false;
      },
      isPhone(){
        var myReg=/^[1][3-9][0-9]{9}$/;
        if (!myReg.test(this.phoneNumber)) {
          this.phoneError = true;
          return false;
        } else {
          this.phoneError = false;
          return true;
        }
      },
      getValidateCode(){
        if(this.isPhone()){
          this.$axios.get(this.$api.getSmsValidateCode,{params:{userMobile:this.phoneNumber}})
            .then(res=>{
              if(!res){
                this.$message({
                  type:'warning',
                  message:'该手机号码不存在！'
                })
              }else if(res.data.code==1){
                this.$message({
                  type:'success',
                  message:res.data.msg
                });
                this.getCountDown();
              }
            })
        }else{
          this.$message({
            type:'warning',
            message:'输入的手机号码有误！'
          });
          return false
        }
      },
      getCountDown(){
        this.loading = true;
        this.validateName = '59s';
        let count = 59;
        const timer = setInterval(()=>{
          this.validateName = --count + 's';
          if(count==0){
            clearInterval(timer);
            this.loading = false;
            this.validateName = '获取验证码'
          }
        },1000)
      },
      validatePassword(){
        if(this.newPassword.length>=6&&this.newPassword.length<=16){
          this.validateNewPassword = false;
          return true
        }else{
          this.validateNewPassword = true;
          return false
        }
      },
      reValidatePassword(){
        if(this.newPassword === this.ensurePassword){
          this.validateEnsurePassword = false;
          return true
        }else{
          this.validateEnsurePassword = true;
          return false
        }
      },
      submitForm(){
        if(this.isPhone()&&this.validatePassword()&&this.reValidatePassword()){
          this.$axios.get(this.$api.findPwd,{params:{newPassword:this.newPassword,userMobile:this.phoneNumber,validateCode:this.validateCode}})
            .then(res=>{
              if(res.data.code==1){
                this.$message({
                  type:'success',
                  message:res.data.msg
                });
                this.cancel();
              }else{
                this.$message({
                  type:'warning',
                  message:'密码重置失败！'
                })
              }
            })
        }else{
          this.$message({
            type:'warning',
            message:'校验失败，请确认输入信息是否正确！'
          })
        }
      },
      cancel(){
        this.page = true;
        this.phoneNumber = '';
        this.phoneError = false;
        this.validateCode = '';
        this.newPassword = '';
        this.validateNewPassword = false;
        this.ensurePassword = '';
        this.validateEnsurePassword = false;
      },
      loginERP(){
        this.rememberPassword();
        if(this.accountName==''){
          this.nameError = true;
        }else{
          this.nameError = false;
        }
        if(this.accountPassword==''){
          this.pwdError = true;
        }else{
          this.pwdError = false;
        }
        if(this.accountPassword!=''&&this.accountName!=''){
          axios.get(this.$api.login,{params:{
              accountName:this.accountName,
              accountPassword:this.accountPassword,
              applicationId:180508192126293,
              loginUrl:'/controller/LoginJson',
              logoutUrl:'/controller/LoginJson',
              exceptionUrl:'/controller/LoginJson'
            }
          })
            .then((res)=>{
              if(res.data.code == 1){
                this.tipError = false;
                this.$sess.set('loginState','alreadyLogin');
                this.$sess.set('userInfo',res.data.result);
                this.$setMarketId();
                const routeArr = [];
                for(let i=0;i<res.data.result.resourceList.length;i++){
                  for(let j=0;j<res.data.result.resourceList[i].resourceList.length;j++){
                    routeArr.push(res.data.result.resourceList[i].resourceList[j].resourceUrl)
                  }
                }
                this.$sess.set('routeArray',routeArr);
                this.$router.push('/car');
              }else{
                this.tipError = true;
                return false;
              }
            })
        }
      }
    }
  }
</script>

<style scoped>
  .all-bg{display: block;width: 100%;height: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
  .total-box{position: absolute;width: 100%;height: 100%;}
  .right {position: absolute;right: 12%;top:50%;margin-top:-198px;width: 668px;height: 396px;}
  .title-img{position: absolute;width: 668px;height:70px;right: 0;}
  .form-box{position: relative;top: 120px;width: 100%;}

  input:focus{border: 1px solid #fff !important;background-color:rgba(255,251,250,0)!important;}


  .pageSpan{font-size: 15px !important;width: 100px !important;left:155px !important;}
  .pageInput{font-size: 15px !important;right:155px !important;}
  .pageBtn{width: 120px !important;right: 155px !important;font-size: 16px !important;}
  .page-tip{left:525px !important;width: 135px !important;}
  .cancelEdit{margin-right: 140px;background:rgba(255,211,222,0) !important;border: 1px solid #ff6816 !important;color:#ff6816 !important;}
  .getCode{outline:none;cursor: pointer;font-size: 13px;background:#ff6816;border-radius:36px;display: inline-block;height: 36px;line-height:6px;border: 1px solid #ff6816;color:#fff;position: absolute !important;right:155px;}

  .top-error-tip{width: 100%;line-height: 20px;}
  .top-error-tip img{position: relative;display: inline-block;width: 16px;height: 16px;left: 282px;}
  .top-error-tip span{position: absolute;display: inline-block;height: 18px;color:#C90001;font-size: 14px;top:-2px;right: 225px}

  .left-error-tip{width: 110px;line-height: 20px;position: absolute;right:0;top:30%;display: inline-block;}
  .left-error-tip img{position: relative;display: inline-block;width: 16px;height: 16px;top:-4px;right:5px}
  .left-error-tip a{position: relative;display: inline-block;height: 18px;color:#C90001;font-size: 14px;top:-7px;right: 5px}

  .userinfo{width: 100%;line-height: 44px;margin-top: 18px;font-size: 18px;position: relative;}
  .userinfo span{display: inline-block;width: 50px;height:19px;line-height:19px;color: #fff;font-size: 16px;text-align: right;position: relative;left:235px;top:-5px;}
  .userinfo input {box-sizing: border-box;padding-left: 30px;width: 260px;position:absolute;right:125px;vertical-align:middle;line-height: 36px;height: 36px;background-color: rgba(73,74,81,0.8);border-radius: 36px;color: #fff;outline:none;border: 1px solid #494A51;font-size: 16px;}
  .inside-box{width: 80%;position: relative;float: right;}

  .remember-box{width: 100%;height: 20px;line-height: 20px;margin-top: 10px;position: relative;color: #fff;}
  .inside-box input{display: inline-block;position: absolute;width: 16px;height: 16px;z-index: 9;opacity: 0;left:150px;cursor: pointer;}
  .inside-box .img1{position: absolute;display: block;width: 16px;height: 16px;z-index: 2;left:150px;border-radius: 3px}
  .inside-box .img2{position: absolute;display: block;width: 16px;height: 16px;z-index: 2;left:150px;border-radius: 3px}
  .remember{position: absolute;left: 170px;font-size:14px;top: -2px;cursor: pointer;}
  .forget{display: inline-block;position: absolute;font-size:14px;right: 125px;top: -2px;cursor: pointer;}

  .login-box{position: relative;top: 15%;}
  .login-btn {position:absolute;right:125px;margin-top:40px;width: 260px;height: 36px;border-radius: 36px;background-color: #ff6816;border: none;font-size: 18px;color: #fff;line-height: 36px;letter-spacing: 10px;padding-left:10px;outline: none;cursor: pointer;display: inline-block;float: right;text-align: center;}
  .login-btn:hover{background-color: #c54a08}
</style>
